import React, { useRef } from "react"
import { Image, View } from "@tarojs/components"
import GpContainer from "@/components/GpContainer"
import { useSetState } from "@/utils/hooks"
import GpVerticelLine from "@/components/GpVerticelLine"
import clsx from "clsx"
import styles from "./index.module.scss"

type IState = {
  currentFilter: number
}
const mockSrc = process.env.__MOCK_SRC__
export default function MyConsult() {
  const filters = useRef<IOptionLike<number>[]>([
    { value: 0, label: "有意向" },
    { value: 1, label: "已报读" },
    { value: 2, label: "不合适" }
  ])
  const [state, setState] = useSetState<IState>({
    currentFilter: filters.current[0].value
  })
  function handleFilterChange(filter: number) {
    if (state.currentFilter === filter) return
    setState({
      currentFilter: filter
    })
  }
  function renderFilters() {
    return (
      <View className={styles.filters}>
        {filters.current.map(l => (
          <View
            onClick={() => handleFilterChange(l.value)}
            className={clsx(styles.filter, {
              [styles.filter__current]: l.value === state.currentFilter
            })}
            key={l.value}
          >
            {l.label}
          </View>
        ))}
      </View>
    )
  }
  function renderList() {
    return (
      <View className={styles.list}>
        <View className={styles.listItem}>
          <View className={styles.listItemTop}>
            <Image src={mockSrc} className={styles.image} />
            <View className={styles.infos}>
              <View className={styles.name}>中传传媒文化教育中心</View>
              <View className={styles.desc}>
                <View className={styles.rate}>4.8</View>
                <View className={styles.rateDesc}>超棒</View>
                <GpVerticelLine height={24} width={2} color="#999999" className={styles.vLine} />
                <View className={styles.comment}>369评论</View>
                <View className={styles.intrest}>323人感兴趣</View>
              </View>
              <View className={styles.distance}>地铁市桥站附近&nbsp;·&nbsp;距您12.3k</View>
            </View>
          </View>
          <View className={styles.listItemBottom}>
            <View className={styles.date}>2023-10-25 12:12</View>
            <View className={styles.yixiang}>有意向</View>
            <View className={clsx(styles.btn, styles.notFit)}>不合适</View>
            <View className={clsx(styles.btn, styles.mark)}>标记报读</View>
          </View>
        </View>
      </View>
    )
  }
  return (
    <GpContainer>
      {renderFilters()}
      {renderList()}
    </GpContainer>
  )
}
